<template>
	<view class="main">
		<view class="top" ref="bar">
			<view class="search" @click="focus">
				<image src="../../static/image/search.png" mode=""></image>
				<text>{{$t('index.seachPlaceholder')}}</text>
			</view>
		</view>
		<view class="page-body" :style="'height:'+height+'px'">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop"
				scroll-with-animation>
				<view class="nav-left-item" @click="categoryClickMain(index,item)" :key="index"
					:class="index==categoryActive?'active':''" v-for="(item,index) in classifyData">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y v-if="isShow">
				<view v-if="classifyData[categoryActive].child.length>0" class="nav-right-item"
					v-for="(item,index) in classifyData[categoryActive].child" @click="toList(item.id)">
					{{item.name}}
				</view>
				
				<view class="nav-right-item" @click="toList(classifyData[categoryActive].id)" v-if='classifyData[categoryActive].child.length==0'>{{
					classifyData[categoryActive].name
				}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// import classifyData from '../../common/classify.data.js';
	export default {
		data() {
			return {
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				classifyData: [],
				arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672,
					7017
				], //初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51, //49行会计算出新值进行覆盖
				navLeftHeight: 0, //左边scroll-view 内层nav的总高度
				diff: 0, //左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0, //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				isShow: false
			}
		},
		async created() {
			await this.getList()
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			this.$nextTick(() => {
				this.getHeightList();
				this.isShow = true
			})
		},
		onReady() {},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.top').boundingClientRect(data => {
				this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight - data.height - data.top;
			}).exec();
		},
		methods: {
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					// _this.leftItemHeight = rects[0].height;
					// _this.navLeftHeight = _this.leftItemHeight * classifyData.length;
					_this.diff = _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect) {
						top += rect.height;
						arr.push(top)
					})
					_this.arr = arr
				}).exec()
			},
			categoryClickMain(index, item) {
				this.categoryActive = index;
				// this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop + 1 : this.scrollTop = this.arr[
				// 	index] //防止两次相等造成点击不触发滚动时间
				// if(item.child.length==0){
				// 	console.log(123)
				// 	uni.navigateTo({
				// 		url: "/pages/clazzList/clazzList?path=clazz&id="+item.id
				// 	})
				// }
			},
			focus() {
				uni.navigateTo({
					url: "/pages/scarch/scarch"
				})
			},
			toList(id) {
				console.log(123)
				uni.navigateTo({
					url: "/pages/clazzList/clazzList?path=clazz&id=" + id
				})
			},
			getList() {
				this.$httpRequest({
					url: "app/api/hotdata.php",
					method: "POST",
					data: {
						service: "moodle_mobile_app"
					}
				}).then(res => {
					this.classifyData = res.cateGory
				})
			}
		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.main {
		overflow: hidden;
	}

	.top {
		width: 90%;
		margin: 104rpx auto 0;

		.search {
			// width: 90%;
			margin: 0 auto;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background-color: rgba(245, 245, 245, 1);
			font-size: 24rpx;
			font-family: PingFang TC-Regular, PingFang TC;
			font-weight: 400;
			color: #A9AFB8;
			// margin: 104rpx auto 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 28rpx;

			text {
				height: 56rpx;
				line-height: 56rpx;
				display: inline-block;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 300rpx;
		height: 88rpx;
		background: #fafafa;
	}

	.nav-left-item {
		height: 88rpx;
		border-right: solid 1px #f1f1f1;
		border-bottom: solid 1px #f1f1f1;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 300rpx;
	}

	.nav-left-item:last-child {
		border-bottom: none;
	}

	.nav-right {
		width: calc(100% - 300rpx);
	}

	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		min-height: 100vh;
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}

	.box:last-child {
		border: none;
		min-height: 100vh;
	}

	.nav-right-item {
		width: calc(100% - 40rpx);
		height: 88rpx;
		/* float: left; */
		line-height: 88rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32rpx;
		background: #fff;
		border-bottom: 2rpx solid #EBEDF0;
		padding: 0 20rpx;
	}

	.nav-right-item image {
		width: 150upx;
		height: 150upx;
	}

	.active {
		color: #4DBEC1;
		background: #fff;
		border-right: 0;
	}

	::-webkit-scrollbar {
		/*取消小程序的默认导航条样式*/
		width: 0;
		height: 0;
		color: transparent;
	}
</style>
